<template>
  <a-card :bordered="false" title>
    <!-- 导出提示 -->
    <div v-show="showSpin">
      <a-spin tip="正在导出..." size="large">
        <div class="spin-content"></div>
      </a-spin>
    </div>
    <!-- 顶部查询 -->
    <a-form-model :model="formdata" v-bind="layout">
      <a-row>
        <a-col :md="8" :sm="24">
          <a-form-model-item label="转换前仓库">
            <a-select v-model="formdata.beforeDepotId" mode="multiple">
              <a-select-option
                v-for="(item, index) in DepotIdlist"
                :key="index"
                :value="item.id"
                >{{ item.depotNo }}{{ item.depotName }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-model-item label="转换后所仓库">
            <a-select mode="multiple" v-model="formdata.afterDepotId">
              <a-select-option
                v-for="(item, index) in DepotIdlist"
                :key="index"
                :value="item.id"
                >{{ item.depotNo }}{{ item.depotName }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col :md="8" :sm="24">
          <a-form-model-item label="转换前存货名称">
            <a-select
              v-model="formdata.inventoryName"
              mode="multiple"
              @search="handleSearch"
              showSearch
              @change="changeInventoryId_before"
            >
              <a-select-option
                v-for="item in InventoryIdlist"
                :key="item.value"
                :value="
                  item.inventoryId +
                  '|' +
                  item.inventoryNo +
                  '|' +
                  item.inventoryName +
                  '|' +
                  item.specificationsModel +
                  '|' +
                  item.unit
                "
                >{{ item.inventoryNo }}{{ item.inventoryName }}
                {{ item.specificationsModel }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="8" :sm="24">
          <a-form-model-item label="转换后存货名称">
            <a-select
              v-model="formdata.inventoryname"
              mode="multiple"
              @search="HandleSearch"
              showSearch
              @change="changeInventoryId_after"
            >
              <a-select-option
                v-for="(item, index) in InventoryIdList"
                :key="index"
                :value="
                  item.inventoryId +
                  '|' +
                  item.inventoryNo +
                  '|' +
                  item.inventoryname +
                  '|' +
                  item.specificationsModel +
                  '|' +
                  item.unit
                "
                >{{ item.inventoryNo }}{{ item.inventoryname }}
                {{ item.specificationsModel }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-model-item label="业务日期">
            <a-range-picker
              v-model="formdata.BusinessDate"
            /> </a-form-model-item
        ></a-col>

        <a-col :md="8" :sm="24">
          <a-form-model-item label="会计日期">
            <!-- <a-range-picker
              format="YYYY-MM"
              :show-time="{ format: 'YYYY-MM' }"
              v-model="formdata.AccountingDate"
               :placeholder="['Start month', 'End month']"
            /> -->
            <a-range-picker
              format="YYYY-MM"
              :value="value"
              :mode="mode2"
              @panelChange="handlePanelChange2"
            /> </a-form-model-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="8" :sm="24"> </a-col>
        <a-col :md="8" :sm="24"> </a-col>
        <a-col :md="8" :sm="24" :style="{ textAlign: 'right', right: '10px' }">
          <a-button
            type="primary"
            style="margin-right: 8px"
            @click="onSubmit()"
          >
            查询
          </a-button>
          <a-button style="margin-right: 8px" @click="reset()"> 重置 </a-button>
          <a-button style="margin-right: 8px" @click="exportToExcel()">
            导出
          </a-button>
        </a-col>
      </a-row>
      <a-row> </a-row>

      <br />
    </a-form-model>
    <!-- 列表显示 -->
    <a-form-model>
      <a-table
        :columns="columns"
        :data-source="xingtaizhuanhuanlist"
        :pagination="pagination"
        id="myTable"
        @change="handleTableChange"
        :scroll="{ x: 2000 }"
        size="middle"
      >
      </a-table>
    </a-form-model>
  </a-card>
</template>
<script>
// ------- 公共接口 ------- ;
import { CommonAjax } from "@/services/modules/common";
const comHttp = new CommonAjax();
import FileSaver from "file-saver";
import { sheet2blob } from "@/utils/export.js";
import XLSX from "xlsx";
import moment from "moment";
import { xingtaizhuanhuanhuizongAjax } from "../../services/modules/ChaXunYuTongJi/XingTaiZhuanHuanHuiZong";
const $http = new xingtaizhuanhuanhuizongAjax();
export default {
  data() {
    return {
      showSpin: false, //打印加载中
      DepotIdlist: [], //所属单位名称字典表
      InventoryIdlist: [], //存货名称字典表
      InventoryIdList: [], //存货名称字典表
      xingtaizhuanhuanlist: [],

      mode2: ["month", "month"],
      value: [],

      pagination: {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        pageSizeOptions: ["10"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      },
      queryParam: {
        //查询参数
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
      },
      //顶部查询条件
      formdata: {
        beforeDepotId: [], //转换前仓库
        afterDepotId: [], //转换后仓库
        AccountingDate: [], //会计期间
        BusinessDate: [], //业务日期

        chaxun_beforeInventoryId: [], //转换前存货名称
        chaxun_afterInventoryId: [], //转换后存货名称
      },
      layout: {
        labelCol: { span: 8 }, //字
        wrapperCol: { span: 15 }, //框内大小
      },
      columns: [
        {
          title: "序号 ",
          dataIndex: "xuhao",
          key: "0",
          width: "5%",
          align: "center",
        },
        // {
        //   title: "转换前仓库",
        //   dataIndex: "beforeFinishedProductDepotName",
        //   key: "1",
        //   align: "center",
        //   width: 150,
        // },
        {
          title: "转换前存货名称",
          dataIndex: "invnameBefore",
          key: "2",
          align: "center",
          width: 150,
        },
        {
          title: "转换前规格型号",
          dataIndex: "invspecBefore",
          key: "3",
          align: "center",
          width: 150,
        },
        {
          title: "转换前单位",
          dataIndex: "measnameBefore",
          key: "4",
          align: "center",
          width: 150,
        },
        {
          title: "转换前数量",
          dataIndex: "outQuantity",
          key: "5",
          align: "center",
          width: 150,
        },
        {
          title: "转换前金额",
          dataIndex: "beforeMoney",
          key: "6",
          align: "center",
          width: 150,
        },
        // {
        //   title: "转换后仓库",
        //   dataIndex: "afterFinishedProductDepotName",
        //   key: "7",
        //   align: "center",
        //   width: 150,
        // },
        {
          title: "转换后存货名称",
          dataIndex: "invnameAfter",
          key: "8",
          align: "center",
          width: 150,
        },

        {
          title: "转换后规格型号",
          dataIndex: "invspecAfter",
          key: "9",
          align: "center",
          width: 150,
        },
        {
          title: "转换后单位",
          dataIndex: "measnameAfter",
          key: "10",
          align: "center",
          width: 150,
        },
        {
          title: "转换后数量",
          dataIndex: "inQuantity",
          key: "11",
          align: "center",
          width: 150,
        },
        {
          title: "转换后金额",
          dataIndex: "afterMoney",
          key: "12",
          align: "center",
          width: 150,
        },
      ],
    };
  },

  mounted() {
    this.getxingtaizhuanhuanlist();
    this.getDepotIdlist();
  },
  methods: {
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.queryParam.page = pagination.current;
      this.queryParam.size = pagination.pageSize;
      this.getxingtaizhuanhuanlist();
    },
    //获取形态转换列表数据
    getxingtaizhuanhuanlist() {
      const { current } = this.pagination; // 分页第一步：拿到要跳转的页数
      //会计日期防止undefined
      let array = this.formdata.AccountingDate;
      array[0] = array[0] == undefined ? "" : array[0];
      array[1] = array[1] == undefined ? "" : array[1];
      let query = `?pageNo=${current}`;
      $http.getxingtaizhuanhuanlist(query).then((res) => {
        const pagination = { ...this.pagination }; //分页
        pagination.total = res.result.total; //分页
        pagination.pageSize = res.result.pageSize; //分页
        this.pagination = pagination; //分页

        this.maxSize = res.result.total;
        console.log(this.xingtaizhuanhuanlist);

        this.xingtaizhuanhuanlist = res.result.list;
        for (let i = 0; i < res.result.list.length; i++) {
          this.xingtaizhuanhuanlist[i].xuhao =
            (pagination.current - 1) * 10 + i + 1;
        }
        if (
            this.xingtaizhuanhuanlist == undefined ||
            this.xingtaizhuanhuanlist.length <= 0
          ) {
            this.$message.warning("暂无符合查询条件的数据");
          }
      });
    },
    //查询
    onSubmit() {
      let array = this.formdata.AccountingDate;
      array[0] = array[0] == undefined ? "" : array[0];
      array[1] = array[1] == undefined ? "" : array[1];

      $http
        .getxingtaizhuanhuanlist(
          "?pageNo=" +
            this.queryParam.page +
            "&pageSize=" +
            this.queryParam.size +
            "&pkStordocBefore=" +
            this.formdata.beforeDepotId +
            "&pkStordocAfter=" +
            this.formdata.afterDepotId +
            "&pkInvbasdocBefore=" +
            this.formdata.chaxun_beforeInventoryId +
            "&pkInvbasdocAfter=" +
            this.formdata.chaxun_afterInventoryId +
            "&beginDate=" +
            this.getBusinessDate() +
            "&endDate=" +
            this.getBusinessDate1() +
            "&accountingPeriodBegin=" +
            this.formdata.AccountingDate[0] +
            "&accountingPeriodEnd=" +
            this.formdata.AccountingDate[1]
        )
        .then((res) => {
          const pagination = { ...this.pagination }; //分页
          pagination.total = res.result.total; //分页
          pagination.pageSize = res.result.pageSize; //分页
          this.pagination = pagination; //分页
          console.log(this.xingtaizhuanhuanlist);

          this.xingtaizhuanhuanlist = res.result.list;
          for (let i = 0; i < res.result.list.length; i++) {
            this.xingtaizhuanhuanlist[i].xuhao =
              (pagination.current - 1) * 10 + i + 1;
          }
           if (
            this.xingtaizhuanhuanlist == undefined ||
            this.xingtaizhuanhuanlist.length <= 0
          ) {
            this.$message.warning("暂无符合查询条件的数据");
          }
        });
    },

    // 重置按钮
    reset() {
      this.ResetTab();
      this.value = [];

      this.formdata = {
        beforeDepotId: [], //转换前仓库
        afterDepotId: [], //转换后仓库
        AccountingDate: [], //会计期间
        BusinessDate: [], //业务日期

        chaxun_beforeInventoryId: [],
        chaxun_afterInventoryId: [],
      };
      this.getxingtaizhuanhuanlist();
    },
    ResetTab() {
      this.pagination = {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据

        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
        showSizeChanger: true, // 显示页面条数改变
        showQuickJumper: true, // 显示快速跳转
      };
      //查询参数
      this.queryParam = {
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: "",
      };
    },
    handleSearch(value) {
      //模糊查询
      this.InventoryIdlist = [];
      console.log("value", value);
      let query = "?name=" + value;
      console.log("query", query);
      if (value == "" || value == null) {
        this.InventoryIdlist = [];
      } else {
        comHttp.getgetSearchInventoryInformationFile(query).then((res) => {
          console.log("结果为", res);

          for (let i = 0; i < res.result.length; i++) {
            if (
              res.result[i].specificationsModel == "null" ||
              res.result[i].specificationsModel == null
            ) {
              res.result[i].specificationsModel = "";
            }
            if (res.result[i].unit == "null" || res.result[i].unit == null) {
              res.result[i].unit = "";
            }
            let data = {
              inventoryId: res.result[i].pkInvbasdoc, // 存货 id
              inventoryNo: res.result[i].invcode, //存货编码
              inventoryName: res.result[i].invname, //存货名称
              specificationsModel: res.result[i].invspec, //规格型号
              unit: res.result[i].measname, //单位
            };
            this.InventoryIdlist.push(data);
          }
        });
      }
    },
    //转换前存货名称change 函数
    changeInventoryId_before(val) {
      this.formdata.chaxun_beforeInventoryId = [];
      for (let i = 0; i < val.length; i++) {
        let array = val[i].split("|");
        this.formdata.chaxun_beforeInventoryId.push(array[0]);
      }
    },
    //转换后存货名称change 函数
    changeInventoryId_after(val) {
      this.formdata.chaxun_afterInventoryId = [];
      for (let i = 0; i < val.length; i++) {
        let array = val[i].split("|");
        this.formdata.chaxun_afterInventoryId.push(array[0]);
      }
    },
    HandleSearch(value) {
      //模糊查询
      this.InventoryIdList = [];
      console.log("value", value);
      let query = "?name=" + value;
      console.log("query", query);
      if (value == "" || value == null) {
        this.InventoryIdList = [];
      } else {
        comHttp.getgetSearchInventoryInformationFile(query).then((res) => {
          console.log("结果为", res);
          // this.goodsList = res.result;
          for (let i = 0; i < res.result.length; i++) {
            if (
              res.result[i].specificationsModel == "null" ||
              res.result[i].specificationsModel == null
            ) {
              res.result[i].specificationsModel = "";
            }
            if (res.result[i].unit == "null" || res.result[i].unit == null) {
              res.result[i].unit = "";
            }
            let data = {
              inventoryId: res.result[i].pkInvbasdoc, // 存货 id
              inventoryNo: res.result[i].invcode, //存货编码
              inventoryname: res.result[i].invname, //存货名称
              specificationsModel: res.result[i].invspec, //规格型号
              unit: res.result[i].measname, //单位
            };
            this.InventoryIdList.push(data);
          }
        });
      }
    },
    //获取所属单位字典表
    getDepotIdlist() {
      this.DepotIdlist = [];
      comHttp.getAllNumberName_new_forU8c().then((res) => {
        console.log("获取所有仓库", res);
        for (let i = 0; i < res.result.length; i++) {
          let data = {
            id: res.result[i].pkStordoc,
            depotName: res.result[i].storname,
            depotNo: res.result[i].storcode,
            pkStordoc: res.result[i].pkStordoc,
          };
          this.DepotIdlist.push(data);
        }
        console.log("返回仓库编码、仓库名称", this.DepotIdlist);
      });
    },
    // 导出
    exportToExcel() {
      this.showSpin = true; //打印加载中
      $http
        .getxingtaizhuanhuanlist(
          "?pageNo=1&pageSize=" +
            this.maxSize +
            "&pkStordocBefore=" +
            this.formdata.beforeDepotId +
            "&pkStordocAfter=" +
            this.formdata.afterDepotId +
            "&pkInvbasdocBefore=" +
            this.formdata.chaxun_beforeInventoryId +
            "&pkInvbasdocAfter=" +
            this.formdata.chaxun_afterInventoryId
        )
        .then((res) => {
          console.log("导出的数据", res.result.list);
          let array = res.result.list;
          this.exportBasic(array);
        });
    },
    //  接收数组，进行导出
    exportBasic(Array) {
      console.log("要导出的数据为:::::", Array);
      //  规整要导出的数据:::::
      let array = [];
      for (let i = 0; i < Array.length; i++) {
        let data = {
          序号: i + 1,
          转换前存货名称: Array[i].invnameBefore,
          转换前规格型号: Array[i].invspecBefore,
          转换前单位: Array[i].measnameBefore,
          转换前数量: Array[i].outQuantity,
          转换前金额: Array[i].null,
          转换后存货名称: Array[i].invnameAfter,
          转换后规格型号: Array[i].invspecAfter,
          转换后单位: Array[i].measnameAfter,
          转换后数量: Array[i].inQuantity,
          转换后金额: Array[i].null,
        };
        array.push(data);
      }
      // 生成 sheet 表格 数据
      let sheet = XLSX.utils.json_to_sheet(array, {
        // 对导出内容进行相应的排序,手动排序。
        header: [
          "序号",
          "转换前存货名称",
          "转换前规格型号",
          "转换前单位",
          "转换前数量",
          "转换前金额",
          "转换后存货名称",
          "转换后规格型号",
          "转换后单位",
          "转换后数量",
          "转换后金额",
        ],
      });
      // 生成导出表格
      let blob = sheet2blob(sheet);
      try {
        FileSaver.saveAs(
          new Blob([blob], {
            type: "application/octet-stream",
          }),
          "形态转换汇总.xlsx" // 导出文件夹名称
        );
      } catch (e) {
        console.log(e);
      }
      this.showSpin = false; //导出中
    },
    //更改时间格式
    getBusinessDate() {
      if (this.formdata.BusinessDate[0]) {
        return `${moment(this.formdata.BusinessDate[0]).format("YYYY-MM-DD")}`;
      } else {
        return "";
      }
    },
    //更改时间格式
    getBusinessDate1() {
      if (this.formdata.BusinessDate[1]) {
        return `${moment(this.formdata.BusinessDate[1]).format("YYYY-MM-DD")}`;
      } else {
        return "";
      }
    },
    // //更改时间格式
    // getAccountingDate() {
    //   if (this.formdata.AccountingDate[0]) {
    //     return `${moment(this.formdata.AccountingDate[0]).format("YYYY-MM")}`;
    //   } else {
    //     return "";
    //   }
    // },
    // //更改时间格式
    // getAccountingDate1() {
    //   if (this.formdata.AccountingDate[1]) {
    //     return `${moment(this.formdata.AccountingDate[1]).format("YYYY-MM")}`;
    //   } else {
    //     return "";
    //   }
    // },
    //todo====会计期间月份选择

    //会计日期
    handlePanelChange2(value, mode) {
      this.value = value;
      this.mode2 = [
        mode[0] === "date" ? "month" : mode[0],
        mode[1] === "date" ? "month" : mode[1],
      ];

      this.formdata.AccountingDate[0] = moment(this.value[0]._d).format(
        "YYYY-MM"
      );
      this.formdata.AccountingDate[1] = moment(this.value[1]._d).format(
        "YYYY-MM"
      );
    },
    //todo =================
  },
};
</script>